<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>我的积分</title>
    <meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js{$Think.config.RESOURCE_VER}"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <link href="{$Think.config.RESOURCEURL}wx_assets/iconfont/iconfont.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <style media="screen">
      body {
        background: #f0f0f0;
      }
      .list .item {
        display: flex;
        border-bottom: 1px solid #e4e4e4;
        padding: 10px 0;
        background: #fff;
      }
      .list .item:last-child {
        border-bottom: none;
      }
      .list .item .left-feild{
        display: flex;
        flex-shrink: 0;
        align-items: center;
        width: 35vw;
        padding-left: 12px;
        box-sizing: border-box;
        color: #a3a3a3;
      }
      .list .item .right-feild .point{
        color: rgba(68, 60, 60, 0.63);
        font-weight: 900;
        font-size: 20px;
        line-height: 30px;
      }
      .list .item .right-feild .order-id{
        color: #696969;
        font-size: 14px;
      }
      .list .item .right-feild .discript{
        color: rgba(105, 105, 105, 0.76);
        font-size: 14px;
      }
      .no-data {
        text-align: center;
        line-height: 40px;
      }
    </style>
</head>
<body>
  <ul class="list"></ul>
</body>
<!-- 积分列表模板 -->
<script type="text/html" id="list-tpl">
  <% if (data) {
    for (var i = 0; i < data.length; i++) {
      var item = data[i]%>
      <li class="item">
          <div class="left-feild">
            <%=item.time%>
          </div>
          <div class="right-feild">
            <div class="point"><% if (item.type == 1 || item.type == 2) { %>-<% } %><%=item.number%>积分</div>
            <div class="order-id">
              <%=item.channel%>
              <% if (item.module == 'formOrder' || item.module == 'order') { %>
                <span><%=item.moduleId%></span>
              <% } %>
            </div>
            <div class="discript"><%=item.description%></div>
          </div>
      </li>
  <%}}%>
</script>

<script>
  function timeParser (time) {
    var publishTime = Date.parse(time.replace(/-/g, '/')) / 1000
    var dSeconds
    var dMinutes
    var dHours
    var dDays
    var timeNow = parseInt(new Date().getTime() / 1000)
    var d

    var date = new Date(publishTime * 1000)
    var Y = date.getFullYear()
    var M = date.getMonth() + 1
    var D = date.getDate()
    var H = date.getHours()
    var m = date.getMinutes()
    var s = date.getSeconds()
    // 小于10的在前面补0
    if (M < 10) {
      M = '0' + M
    }
    if (D < 10) {
      D = '0' + D
    }
    if (H < 10) {
      H = '0' + H
    }
    if (m < 10) {
      m = '0' + m
    }
    if (s < 10) {
      s = '0' + s
    }

    d = timeNow - publishTime
    dDays = parseInt(d / 86400)
    dHours = parseInt(d / 3600) % 24
    dMinutes = parseInt(d / 60) % 60
    dSeconds = parseInt(d)

    var toDay = new Date()

    if (Y == toDay.getFullYear() && M == (toDay.getMonth() + 1) && D == toDay.getDate()) {
      return '今天<br/>' + H + ':' + m
    } else if (Y == toDay.getFullYear() && M == (toDay.getMonth() + 1) && D == (toDay.getDate() -1)) {
      return '昨天<br/>' + H + ':' + m
    } else {
      return Y + '-' + M + '-' + D + '<br/>' + H + ':' + m
    }
  }

  function Page () {
      this.url = "{$Think.config.SERVER_HOST}call.json?customerId={$customerId}";
      this.page = 0
      this.pageCount = Math.ceil('{$total}' / 10)
  };

  $.extend(Page.prototype, {
      init: function () {
          this.bindEvents()
          this.getFirstPageListInfo()
          this.renderList()
          var me=this;
          $.util.initDataLoading({
              me: page,
              lastChildren:function(){
                  return $(".list .item:last-child");
              },
              page:function(){
                  return page.page;
              },
              pageCount:function(){
                  return page.pageCount;
              }
          });
      },

      bindEvents () {},

      // 获取第一页数据
      getFirstPageListInfo () {
        try {
  				this.list = JSON.parse('{$data|json_encode}') || [];
  			} catch (err) {
  				console.log(err)
  				this.list = []
  			}
      },

      // 获取列表信息
      _loadList: function (page, callback) {
        var that = this
        this.page = page
        var params = {
          start: this.page * 10,
          limit: 10
        }
          $.ajax({
              type: "get",
              url: this.url,
              dataType: 'json',
              data: {
                 module: "point",
                 method: "userPointBill",
                 params: JSON.stringify(params)
              },
              success: function (res) {
                if (res.code == 0) {
                    that.list = res.data
                    callback&&callback();
                    that.renderList();
                } else {
                    $.util.alert(res.msg);
                }
              }
          });
      },

      // 初始化列表
      renderList: function () {
        this.list.forEach(function(item) {
          item.time = timeParser(item.createTime)
        })
        var html = ''
        if (this.page == 0 && this.list.length == 0) {
          html = '<div class="no-data">暂无数据</div>'
        } else {
          html=template("list-tpl", {data: this.list})
        }
        $('.list').append(html);
      }
  });

  var page = new Page();
  page.init();
</script>
</html>
